<template>
  <div class="wrap">
    <div style="display:flex">
      <date-select @dateChange="dateChange" />
      <classify-select :options="options" @classfySelect="classfySelect" />
    </div>
    <div class="table">
      <my-table v-if="tableShow" :col="col" :data="tableData" />
    </div>
  </div>
</template>

<script>
import { getGroupReport } from '@/api/stationMonitor'
import { mapGetters } from 'vuex'
import DateSelect from '@/components/DateSelect'
import ClassifySelect from '@/components/ClassifySelect'
import MyTable from './table/MyTable.vue'

export default {
  components: {
    DateSelect,
    ClassifySelect,
    MyTable
  },
  props: {
    id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      date: '',
      classfy: 'max',
      col: [],
      tableData: [],
      tableShow: false,
      options: [{
        value: 'max',
        label: '最大'
      },
      {
        value: 'avg',
        label: '平均'
      }, {
        value: 'min',
        label: '最小'
      }]
    }
  },
  computed: {
    ...mapGetters([
      'stationId'
    ])
  },
  watch: {
    id() {
      this.getGroupReport()
    }
  },
  activated() {
    console.log('asdfadsdfasdf')
  },
  methods: {
    getGroupReport() {
      console.log(this.id)
      const option = {
        stationId: this.stationId,
        groupId: this.id,
        date: this.date,
        options: this.classfy
      }
      getGroupReport(option).then(res => {
        if (res.code === 1000) {
          this.tableShow = false
          const { data } = res
          this.col = data.title
          this.tableData = data.data
          this.$nextTick(() => { // DOM 更新了
            this.tableShow = true
          })
        }
      })
    },
    dateChange(date) {
      this.date = date
      this.getGroupReport()
    },
    classfySelect(val) {
      this.classfy = val
      this.getGroupReport()
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  padding: 10px;
  .table {
    border: 1px solid #000;
    height: 93%;
  }
}
</style>
